<template>
  <div>
    <div class="div">
      <a-row class="row">
        <a-col span="5" class="left">
          <a-row class="left_center_img">
            <img class="img" :src="user.icon" />
          </a-row>
          <a-row class="left_center_text">超级管理员</a-row>
          <a-row class="left_cneter_button">
            <a-button @click="changeIcon()">修改头像</a-button>
          </a-row>
        </a-col>
        <a-col span="15">
          <a-row class="center_margin">
            <a-col span="4" class="center_text">用户昵称：</a-col>
            <a-col span="20">
              <a-col span="15">
                <a-input disabled v-model="user.name"/>
              </a-col>
            </a-col>
          </a-row>
          <a-row class="center_margin">
            <a-col span="4" class="center_text">电子邮箱：</a-col>
            <a-col span="20">
              <div v-show="(!(user.email === null)&&!(user.email === ''))">
                <a-col span="15">
                  <a-input disabled v-model="user.email" />
                </a-col>
              </div>
              <div v-show="((user.email === null)||(user.email === ''))">
                <a-col span="15">
                  <a-input :disabled="emailDisabled" placeholder="暂未绑定邮箱" v-model="boundEmail"/>
                </a-col>
                <a-col span="5">
                  <a-button @click="emailBound()" style="margin-left:5px">
                    绑定邮箱
                  </a-button>
                </a-col>
              </div>
            </a-col>
          </a-row>
          <a-row class="center_margin">
            <a-col span="4" class="center_text">手机号码：</a-col>
            <a-col span="20">
              <div v-show="(!(user.phone === null)&&!(user.phone === ''))">
                <a-col span="15">
                  <a-input disabled v-model="user.phone" />
                </a-col>
              </div>
              <div v-show="((user.phone === null)||(user.phone === ''))">
                <a-col span="15">
                  <a-input :disabled="phoneDisabled" placeholder="暂未绑定手机" v-model="boundPhone"/>
                </a-col>
                <a-col span="5">
                  <a-button @click="phoneBound()" style="margin-left:5px">
                    绑定手机
                  </a-button>
                </a-col>
              </div>
            </a-col>
          </a-row>
          <a-row class="center_margin">
            <a-col span="4" class="center_text">
              社团：
            </a-col>
            <a-col span="20">
              <div v-show="(!(user.club === null)&&!(user.club === ''))">
                <a-col span="15">
                  <a-input disabled v-model="user.club" />
                </a-col>
              </div>
              <div v-show="((user.club === null)||(user.club === ''))">
                <a-col span="15">
                  <a-input :disabled="clubDisabled" placeholder="暂未绑定社团" v-model="boundClub"/>
                </a-col>
                <a-col span="5">
                  <a-button @click="clubBound()" style="margin-left:5px">
                    绑定社团
                  </a-button>
                </a-col>
              </div>
            </a-col>
          </a-row>
        </a-col>
        <a-col span="4"></a-col>
      </a-row>
      <a-row class="right_margin">
        <a-col span="5"></a-col>
        <a-col span="5" class="line">
          <a-col span="20">
            最近登录：{{ user.updateTime }}
          </a-col>
        </a-col>
        <a-col span="5" class="line">
          <a-col span="20">
            目前时间： {{ currentTime }}
          </a-col>
        </a-col>
        <a-col span="5" class="line">
          <a-col span="20">
            创建时间： {{ user.createTime }}
          </a-col>
        </a-col>
        <a-col span="4"></a-col>
      </a-row>
    </div>
    <div>
      <a-modal
        title="上传图片"
        style="top: 20px;"
        :width="800"
        v-model="visible"
        @ok="handleOk"
      >
        <div class="clearfix">
          <a-upload
            action="/api/upload"
            list-type="picture-card"
            :headers="headers"
            :file-list="fileList"
            @preview="handlePreview"
            @change="handleChange"
          >
            <div v-if="fileList.length < 2">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import Vue from 'vue'
import storage from 'store'
import { addAuthentication, updateUser } from '@/api/manage'
Vue.prototype.$moment = moment
function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
export default {
    data () {
        return {
          user: {},
          token: storage.get('Access-Token'),
          visible: false,
          currentTime: '',
          response: '',
          fileList: [],
          previewImage: '',
          previewVisible: false,
          emailDisabled: true,
          boundEmail: '',
          boundPhone: '',
          boundClub: '',
          phoneDisabled: true,
          clubDisabled: true
        }
    },
    methods: {
      handleCancel () {
        this.previewVisible = false
      },
      async handlePreview (file) {
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj)
        }
        this.previewImage = file.url || file.preview
        this.previewVisible = true
      },
      handleChange ({ file, fileList }) {
        this.fileList = fileList
        this.response = file.response
        // console.log(file.response)
      },
      changeIcon () {
        this.visible = true
      },
      handleOk () {
        this.visible = false
        if (this.response === 'fail' && this.response !== null && this.response !== '') {
          const Icon = { icon: this.response }
          updateUser(Icon).then((res) => {
            this.$set(this.user, 'icon', this.response)
            // console.log('success')
          })
        }
      },
      emailBound () {
        this.emailDisabled = false
      },
      phoneBound () {
        this.phoneDisabled = false
      },
      clubBound () {
        this.clubDisabled = false
        if (this.boundClub !== '' && this.boundClub !== null) {
          const Club = { club: this.boundClub }
          addAuthentication(Club).then((res) => {
            // console.log('success')
          })
        }
      },
      getTime () {
        this.currentTime = this.$moment(new Date()).format('YYYY.MM.DD')
      }
    },
    computed: {
      userInfo () {
        // console.log(this.$store.getters.userInfo)
        return this.$store.getters.userInfo
      },
       headers () {
          return {
              'Access-Token': this.token
          }
      }
    },
    created () {
      this.user = this.userInfo
    },
    mounted () {
      var that = this
      that.getTime()
    }
}
</script>

<style scoped>
.line{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  word-break: break-all;
}
.div {
  padding-top: 10%;
  padding-bottom: 20%;
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 100%;
}
.left_img {
  height: 100px;
  width: 100px;
  text-align: center;
}
.img {
  width: 100px;
  height: 100px;
}
.left {
  margin-top: 50px;
  height: 80px;
}
.left_center_text {
  padding-top: 20px;
  text-align: center;
  padding-bottom: 10px;
}
.left_cneter_button {
  padding-top: 10px;
  text-align: center;
}
.left_center_img {
  text-align: center;
}
.center_margin {
  padding-bottom: 20px;
  padding-top: 20px;
}
.center_text {
  padding-left: 10px;
}
.center_myword {
  word-wrap: break-word;
}
.right_margin {
  margin-top: 20px;
}
.button_col_center {
  text-align: center;
}
.button_margin {
  margin-top: 20px;
}
.button_center {
  padding-left: 100px;
  padding-right: 100px;
}
</style>
